<template>
	<view>
		<image class="top" src="../../static/kftop.png" mode=""></image>
		<view class="box">
			<view class="boxtop">
				<image class="boxtopimg" src="../../static/0.png" mode=""></image>
				<view class="boxtoptext">
					客服微信二维码
				</view>
			</view>

			<view class="boxbox">
				<view class="boxboxnr">
					<image class="boxboxz" src="../../static/kefudianhua@2x.png" mode=""></image>
					<view class="boxboxy">
						客服电话
					</view>
				</view>
				<view class="boxboxnr" @click="PhoneCall">
					<view class="boxboxx">
						拨号
					</view>
				</view>
			</view>
			<button class="boxbox" open-type="contact" @contact="contact">
				<view class="boxboxnr">
					<image class="boxboxz" src="../../static/kefudianhua@2x.png" mode=""></image>
					<view class="boxboxy">
						在线客服
					</view>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			//客服
			contact(e) {
				console.log('客服', e);
			},
			//打电话
			PhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '110' //仅为示例
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}


	.top {
		width: 750rpx;
		height: 523rpx;
	}

	.box {
		padding: 0 26rpx;
		position: relative;
		top: -128rpx;

		.boxtop {
			width: 698rpx;
			height: 439rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: -2rpx 0rpx 10rpx 2rpx rgba(158, 158, 158, 0.10);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.boxtopimg {
				width: 262rpx;
				height: 262rpx;
				background-color: aqua;
				margin-bottom: 30rpx;
			}

			.boxtoptext {
				font-size: 30rpx;
				font-family: Microsoft YaHei, Microsoft YaHei-Regular;
				font-weight: 400;
				color: #333333;
			}

		}

		.boxbox {
			height: 120rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: -2rpx 0rpx 10rpx 2rpx rgba(158, 158, 158, 0.10);
			margin: 24rpx 0;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.boxboxnr {
				display: flex;
				justify-content: center;
				align-items: center;

				.boxboxz {
					width: 36rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}

				.boxboxy {
					font-size: 30rpx;
					font-family: Microsoft YaHei, Microsoft YaHei-Regular;
					font-weight: 400;
					color: #333333;
				}

				.boxboxx {
					width: 130rpx;
					height: 60rpx;
					background: linear-gradient(0deg, #004cce 0%, #046eca 100%), #fb3530;
					border-radius: 30rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Microsoft YaHei, Microsoft YaHei-Regular;
					font-weight: 400;
					color: #ffffff;
					line-height: 60rpx;
				}
			}
		}

		.boxbut {
			width: 698rpx;
			height: 420rpx;
			opacity: 0.2;
			background: #000000;
			border-radius: 16rpx;
			background-color: aqua;
		}
	}
</style>